

<template>
  <div class="app-container">
    <el-row :gutter="20" style="padding-top: 30px">
      <!-- 工具栏-->
      <el-col :span="4" :xs="24">
          <div
            v-for="(item, index) in itemOptions"
            :key="item.code"
            class="components-item"
          >
            <div class="components-body" @click="handleAddItem(item)">
              <svg-icon :icon-class="item.tagIcon" />
              {{ item.label }}
              <span style="float: right">{{item.num + '/' +item.size}}</span>
            </div>
          </div>

      </el-col>

      <el-col :span="8" :xs="24">
        <!-- 模块展示区-->
        <div class="head-container"  :style="'position: relative;min-height: 600px;width:100%;border: 1px solid #DCDFE6;background-color: '+page.backgroundColor">
          <div
            v-for="(item, index) in pageItemList"
            :key="item.id"
            :class="item.id ==currentItem.id?'item-selected':''"
            style="text-align:center;min-height:30px;position: relative;font-size: 0;border-bottom: 1px solid #1890FF"
            @click="setCurrentItem(item)"
          >
            <div v-if="item.id ==currentItem.id"  style="width:20px;position: absolute;right: -25px; " @click.stop="">
              <el-button @click="handleMoveUp(item)" class="myButton" plain style="border-radius: 5px 5px 0 0" size="mini" type="primary" icon="el-icon-top"></el-button>
              <el-button @click="handleMoveDown(item)" class="myButton" plain style="border-radius: 0 0 5px 5px" size="mini" type="primary" icon="el-icon-bottom"></el-button>
              <el-button @click="handleDeleteItem(item)" class="myButton" plain style="border-radius:5px;margin-top: 10px" size="mini" type="primary" icon="el-icon-delete"></el-button>
            </div>
            <!-- 轮播图-->
            <el-carousel v-if="item.itemCode == 1" arrow="never" :height="item.scrollposterList.length>0?(bannerWidth*item.scrollposterList[0].height/item.scrollposterList[0].width)+'px':'100px'" autoplay >
              <el-carousel-item v-for="(item,index) in item.scrollposterList" :key="index">
                <img v-resize="resetTableHeight" ref="bannerWidth" @load="imgLoad" style="width: 100%" :src="baseUrl+item.filePath">
              </el-carousel-item>
            </el-carousel>
            <!--弹出图层-->
            <div  v-if="item.itemCode == 2" style="height: 30px;width: 100%;text-align: center;background-color: #ECF5FF;font-size: 14px;line-height: 30px" @click="showEject(item)">
              {{ item.itemName? item.itemName : '弹出图层'}}
            </div>
            <!--公告提示-->
            <div v-if="item.itemCode == 3" style="height: 100%">
              <div v-if="item.notice" :style="'color:'+item.notice.textColor+';background-color:'+item.notice.backgroundColor " >
                <svg-icon icon-class="notice" style="font-size: 20px;height: 30px;color: red" />
                <marquee  style="display: inline-block;margin: 0;font-size:14px;vertical-align: top;text-align: left;line-height: 30px;width: calc(100% - 30px);">
                  <span >{{item.notice.content}}</span>
                </marquee>
<!--                <marquee direction="up" scrollamount="3" v-if="item.notice.scrollMode == 1" :style="'display: inline-block;margin: 0;font-size:14px;vertical-align: top;text-align: left;height: 30px;line-height: 30px;width: calc(100% - 30px);'">
                  <span >{{item.notice.content}}</span>
                </marquee>-->
              </div>
            </div>
            <!--热区切图-->
            <img v-if="item.itemCode == 4 && item.filePath" style="width:100%;" :src="baseUrl+item.filePath">
            <!--商品展示区-->
            <div  v-if="item.itemCode == 5 && item.itemGoods " style="width: 100%;">
              <div v-if="!item.itemGoods.filePath && item.itemGoods.itemTitle" style="font-size: 18px;margin: 10px 0"> -    {{item.itemGoods.itemTitle}}    - </div>
              <!--  banner-->
              <img v-if="item.itemGoods.filePath" style="width:100% " :src="baseUrl+item.itemGoods.filePath">
              <!--一行一列 -->
              <div v-if="item.itemGoods.displayMode == 0">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.itemGoodsList" style="width: 98%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 100%" > </el-image>
                    <div style="margin-top: 5px">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.name }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--一行两列 -->
              <div v-if="item.itemGoods.displayMode == 1">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.itemGoodsList" style="width: 48%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 100%" > </el-image>
                    <div style="margin-top: 5px">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.name }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--列表显示 -->
              <div v-if="item.itemGoods.displayMode == 2">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.itemGoodsList" style="width: 98%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 45%" > </el-image>
                    <div style="margin-top: 5px;display:inline-block;vertical-align:top;width: 55%">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.name }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--视频模块-->
            <video v-if="item.itemCode == 6 && item.video && item.video.videoPath " :autoplay="false" style="width:100%;" :src="baseUrl+item.video.videoPath" controls ></video>
            <!--拼团-->
            <div  v-if="item.itemCode == 7 && item.groupbuy " style="width: 100%;">

              <div v-if="!item.groupbuy.filePath && item.groupbuy.itemTitle" style="font-size: 18px;margin: 10px 0"> -    {{item.groupbuy.itemTitle}}    - </div>
              <!--  banner-->
              <img v-if="item.groupbuy.filePath" style="width:100% " :src="baseUrl+item.groupbuy.filePath">
              <div v-if="item.groupbuy.displayMode == 0">
                <!--  商品列表-->
                <!--一行一列 -->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.groupbuy.groupbuyGoodsList" style="width: 98%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 100%" > </el-image>
                    <div style="margin-top: 5px">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.goodsName }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--一行两列 -->
              <div v-if="item.groupbuy.displayMode == 1">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.groupbuy.groupbuyGoodsList" style="width: 48%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 100%" > </el-image>
                    <div style="margin-top: 5px">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.goodsName }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--列表显示 -->
              <div v-if="item.groupbuy.displayMode == 2">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.groupbuy.groupbuyGoodsList" style="width: 98%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 45%" > </el-image>
                    <div style="margin-top: 5px;display:inline-block;vertical-align:top;width: 55%">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.goodsName }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--限时抢购-->
            <div  v-if="item.itemCode == 8 && item.panicbuy " style="width: 100%;">
              <div v-if="!item.panicbuy.filePath && item.panicbuy.itemTitle" style="font-size: 18px;margin: 10px 0"> -    {{item.panicbuy.itemTitle}}    - </div>
              <!--  banner-->
              <img v-if="item.panicbuy.filePath" style="width:100% " :src="baseUrl+item.panicbuy.filePath">
              <div v-if="item.panicbuy.displayMode == 0">
                <!--  商品列表-->
                <!--一行一列 -->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.panicbuy.panicbuyGoodsList" style="width: 98%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 100%" > </el-image>
                    <div style="margin-top: 5px">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.goodsName }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--一行两列 -->
              <div v-if="item.panicbuy.displayMode == 1">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.panicbuy.panicbuyGoodsList" style="width: 48%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 100%" > </el-image>
                    <div style="margin-top: 5px">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.goodsName }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--列表显示 -->
              <div v-if="item.panicbuy.displayMode == 2">
                <!--  商品列表-->
                <div style="width: 100%;text-align: left">
                  <div   v-for="goods in item.panicbuy.panicbuyGoodsList" style="width: 98%;height:100%;display: inline-block;vertical-align: top;margin: 1%">
                    <el-image  :src="baseUrl+goods.picturePath" style="width: 45%" > </el-image>
                    <div style="margin-top: 5px;display:inline-block;vertical-align:top;width: 55%">
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ goods.goodsName }}</span>
                      <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: red;">¥{{ goods.referencePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--单图展示-->
            <img v-if="item.itemCode == 9 && item.picture && item.picture.filePath" style="width:100%;" :src="baseUrl+item.picture.filePath">
          </div>


          <!--  弹出图层-->
          <div v-if="ejectShow && ejectPath" style="width: 80%;position: absolute;top: 200px;left:10%;z-index: 999">
            <div style="width: 100%;position: absolute">
              <icon style="position: absolute;top: 5px;right: 5px" class="el-icon-close" @click="closeEjectShow" ></icon>
              <img style="width: 100%" :src="baseUrl+ejectPath">
            </div>
          </div>
        </div>

      </el-col>
      <!-- 属性区-->
      <el-col :span="9" :xs="24" style="padding-left: 50px">
        <div class="head-container" v-if="currentItem.itemCode" >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>模块类型:{{ getItemByCode(currentItem.itemCode).label }}</span>
            </div>

            <div  class="text item">
              <el-form ref="itemForm"   :model="currentItem"  label-width="80px">
                <el-form-item label="模块名称" prop="itemName" :rules="{required:true , message:'模块名称不能为空',trigger: 'blur'}" >
                  <el-input v-model="currentItem.itemName" placeholder="请输入模块名称" />
                </el-form-item>
                <!--轮播海报编辑区-->
                <div v-if="currentItem.itemCode == 1" >
                  <el-form-item label="模块图片" >
                    图片要求宽度750px，高度600-1200px的图片，展示的所有图片尺寸需一致（即第一张上传的图片的尺寸）如需修改展示图片尺寸，需将当前图片都删除后才能进行重制
                  </el-form-item>
                  <div style="position: relative" v-for="(item,index) in currentItem.scrollposterList" >
                    <div style="width:20px;position: absolute">
                      <el-button @click="handleItemMove(0,index)" class="myButton" plain style="border-radius: 5px 5px 0 0" size="mini" type="primary" icon="el-icon-top"></el-button>
                      <el-button @click="handleItemMove(1,index)" class="myButton" plain style="border-radius: 0 0 5px 5px" size="mini" type="primary" icon="el-icon-bottom"></el-button>
                    </div>
                    <img style="margin-left:30px" :src="baseUrl+item.previewPath" height="60" width="60"/>
                    <div style="height: 60px; width: calc(100% - 100px);margin-left: 10px;display: inline-block;vertical-align: top;font-size: 14px">
                      <el-select  @change="currentItemChange(index)" v-model="currentItem.scrollposterList[index].linkType" style="width: 28%"  placeholder="请选择">
                        <el-option
                          v-for="item in linkTypeOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <!--商品-->
                      <div v-if="currentItem.scrollposterList[index].linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-button type="text" size="mini" @click="handleSelectGoods(index)"> {{currentItem.scrollposterList[index].linkGoodsName?currentItem.scrollposterList[index].linkGoodsName:'选择商品'}}</el-button>
                      </div>
                      <!--商品分类-->
                      <div v-else-if="currentItem.scrollposterList[index].linkType == 3" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" :prop="'scrollposterList['+index+'].linkAddress'" :rules="{required:true , message:'不能为空',trigger: ['blur','change']}" >
                          <treeselect style="width: 100%;"
                                      v-model="currentItem.scrollposterList[index].linkAddress"
                                      :options="goodsClassList"
                                      :normalizer="normalizer"
                                      :show-count="true"
                                      :clearable="false"
                                      @input="linkAddressChange(index)"
                                      placeholder="请选择商品分类" />
                        </el-form-item>
                      </div>
                      <!--自定义页面-->
                      <div v-else-if="currentItem.scrollposterList[index].linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" :prop="'scrollposterList['+index+'].linkAddress'" :rules="{required:true , message:'不能为空',trigger: ['blur','change']}" >
                          <el-select v-model="currentItem.scrollposterList[index].linkAddress" style="width: 100%"  placeholder="请选择">
                            <el-option
                              v-for="item in pageList"
                              :key="item.id+''"
                              :label="item.pageName"
                              :value="item.id+''"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <!-- 无 || 首页 || 优惠券 || 搜索页-->
                      <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                      </div>
                      <i style="padding:1.5%" class="el-icon-link"></i>
                      <i @click="handleDeleteItemChild(index)" style="padding:1.5%" class="el-icon-delete"></i>
                    </div>
                  </div>
                  <el-button @click="handleSelector"  type="primary" plain icon="el-icon-plus">添加 {{ currentItem.scrollposterList?currentItem.scrollposterList.length : 0}}/4</el-button>
                </div>
                <!-- 弹出图层-->
                <div v-if="currentItem.itemCode == 2" >
                  <el-form-item label="图层图片"  prop="eject.pictureId"  :rules="{required:true , message:'图片不能为空',trigger: ['blur','change']}" >
                    <div v-if="!currentItem.eject.filePath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 40px;width: 40px;line-height: 40px;text-align: center">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div v-else @click="handleSelector"  style="width: 200px;">
                      <el-image  v-model="currentItem.eject.pictureId"  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.eject.filePath"></el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="显示时长" prop="eject.displayTime" :rules="{required:true , message:'显示时长不能为空',trigger: 'blur'}" >
                    <el-input v-model="currentItem.eject.displayTime" placeholder="请输入显示时长" />
                  </el-form-item>
<!--                  <el-form-item label="滚动方式" >
                    <el-radio-group v-model="currentItem.eject.displayMode">
                      <el-radio  :label="0" >进入页面显示一次</el-radio>
                      <el-radio  :label="1" >每次进入页面显示</el-radio>
                    </el-radio-group>
                  </el-form-item>-->
                  <el-form-item label="链接" >
                    <div style="position: relative" >
                      <el-select @change="currentItemChange" v-model="currentItem.eject.linkType" style="width: 28%"  placeholder="请选择">
                        <el-option
                          v-for="item in linkTypeOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <!--商品-->
                      <div v-if="currentItem.eject.linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-button type="text" size="mini" @click="handleSelectGoods(0)"> {{currentItem.eject.linkGoodsName?currentItem.eject.linkGoodsName:'选择商品'}}</el-button>
                      </div>

                      <div v-else-if="currentItem.eject.linkType == 3" style="display: inline-block;vertical-align: top;width: 60%;padding-left: 2%">
                        <el-form-item label-width="0" prop="eject.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <treeselect style="width: 100%;"
                                      v-model="currentItem.eject.linkAddress"
                                      :options="goodsClassList"
                                      :normalizer="normalizer"
                                      :show-count="true"
                                      :clearable="false"
                                      placeholder="请选择商品分类" />
                        </el-form-item>
                      </div>
                      <!--自定义页面-->
                      <div v-else-if="currentItem.eject.linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" prop="eject.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <el-select v-model="currentItem.eject.linkAddress" style="width: 100%"  placeholder="请选择">
                            <el-option
                              v-for="item in pageList"
                              :key="item.id+''"
                              :label="item.pageName"
                              :value="item.id+''"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <!-- 搜索页-->
                      <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                      </div>
                        <i style="padding:1.5%" class="el-icon-link"></i>
                    </div>
                  </el-form-item>
                </div>
                <!-- 公告提示-->
                <div v-if="currentItem.itemCode == 3" >
                  <el-form-item label="提示语" prop="notice.content" :rules="{required:true , message:'提示语不能为空',trigger: 'blur'}" >
                    <el-input v-model="currentItem.notice.content" placeholder="请输入提示语" />
                  </el-form-item>
<!--                  <el-form-item label="滚动方式" >
                    <el-radio-group v-model="currentItem.notice.scrollMode">
                      <el-radio  :label="0" >横向滚动</el-radio>
                      <el-radio  :label="1" >竖向滚动</el-radio>
                    </el-radio-group>
                  </el-form-item>-->
                  <el-form-item label="链接" >
                    <div style="position: relative" >
                      <el-select @change="currentItemChange" v-model="currentItem.notice.linkType" style="width: 28%"  placeholder="请选择">
                        <el-option
                          v-for="item in linkTypeOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <!--商品-->
                      <div v-if="currentItem.notice.linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-button type="text" size="mini" @click="handleSelectGoods(0)"> {{currentItem.notice.linkGoodsName?currentItem.notice.linkGoodsName:'选择商品'}}</el-button>
                      </div>

                      <div v-else-if="currentItem.notice.linkType == 3" style="display: inline-block;vertical-align: top;width: 60%;padding-left: 2%">
                        <el-form-item label-width="0" prop="notice.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <treeselect style="width: 100%;"
                                      v-model="currentItem.notice.linkAddress"
                                      :options="goodsClassList"
                                      :normalizer="normalizer"
                                      :show-count="true"
                                      :clearable="false"
                                      placeholder="请选择商品分类" />
                        </el-form-item>
                      </div>
                      <!--自定义页面-->
                      <div v-else-if="currentItem.notice.linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" prop="notice.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <el-select v-model="currentItem.notice.linkAddress" style="width: 100%"  placeholder="请选择">
                            <el-option
                              v-for="item in pageList"
                              :key="item.id+''"
                              :label="item.pageName"
                              :value="item.id+''"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <!-- 搜索页-->
                      <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                      </div>
                      <i style="padding:1.5%" class="el-icon-link"></i>
                    </div>
                  </el-form-item>
                  <el-form-item label="文字颜色" >
                    <el-color-picker
                      v-model="currentItem.notice.textColor"
                      :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
                      class="myPicker"
                      style="width: 30%;"
                      popper-class="theme-picker-dropdown"
                    />
                  </el-form-item>
                  <el-form-item label="背景颜色" >
                    <el-color-picker
                      v-model="currentItem.notice.backgroundColor"
                      :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
                      class="myPicker"
                      style="width: 30%;"
                      popper-class="theme-picker-dropdown"
                    />
                  </el-form-item>
                </div>
                <!-- 热区切图编辑区-->
                <div v-if="currentItem.itemCode == 4" >
                  <el-form-item label="图片要求" >
                    图片要求宽度750px，高度600-1200px的图片
                  </el-form-item>
                  <el-form-item  label-width="0" prop="itemPicture"  :rules="{required:true , message:'图片不能为空',trigger: ['blur','change']}" >
                    <div>
                      <input v-model="currentItem.itemPicture" type="hidden"></input>
                      <div  v-resize="resetTableHeight" ref="hotspotareaWidth"  :style="'position: relative;height:'+hotspotareaHeight+';font-size:0;border: 1px solid #ffffff;margin-bottom: 10px'" >
                        <el-image  v-if="currentItem.filePath"  @click="handleSelector" @load="loaded"  v-model="currentItem.itemPicture"  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.filePath"></el-image>
                        <Draggable v-if="draggable" v-for="(item,index) in currentItem.hotspotareaList" :key="index" @dragstop="drag" @resizestop="resize" :x="hotspotareaWidth*item.pointx" :y="hotspotareaHeight*item.pointy" :w="hotspotareaWidth*item.width" :h="hotspotareaHeight*item.height" :index="index+1" :parent="true" :min-width="30" :min-height="30" />
                      </div>
                      <div v-if="!currentItem.filePath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 100px;width: 100px;line-height: 100px;text-align: center">
                        <i class="el-icon-plus"></i>
                      </div>
                    </div>
                    <div  style="position: relative;" v-for="(item,index) in currentItem.hotspotareaList" >
                      <div style="width:20px;position: absolute">
                        <el-button @click="handleItemMove(0,index)" class="myButton" plain style="border-radius: 5px 5px 0 0" size="mini" type="primary" icon="el-icon-top"></el-button>
                        <el-button @click="handleItemMove(1,index)" class="myButton" plain style="border-radius: 0 0 5px 5px" size="mini" type="primary" icon="el-icon-bottom"></el-button>
                      </div>

                      <div style="height: 60px;margin-left:30px; width: calc(100% - 40px);display: inline-block;vertical-align: top;font-size: 14px">
                        <div style="display: inline-block;">序号:{{index+1}}</div>
                        <el-select @change="currentItemChange(index)" v-model="currentItem.hotspotareaList[index].linkType" style="width: 28%;margin-left: 2%"  placeholder="请选择">
                          <el-option
                            v-for="item in linkTypeOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                        <!--商品-->
                        <div v-if="currentItem.hotspotareaList[index].linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                          <el-button type="text" size="mini" @click="handleSelectGoods(index)"> {{currentItem.hotspotareaList[index].linkGoodsName?currentItem.hotspotareaList[index].linkGoodsName:'选择商品'}}</el-button>
                        </div>
                        <div v-else-if="currentItem.hotspotareaList[index].linkType == 3" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                          <el-form-item label-width="0" :prop="'hotspotareaList['+index+'].linkAddress'" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                            <treeselect style="width: 100%;"
                                        v-model="currentItem.hotspotareaList[index].linkAddress"
                                        :options="goodsClassList"
                                        :normalizer="normalizer"
                                        :show-count="true"
                                        :clearable="false"
                                        @input="linkAddressChange(index)"
                                        placeholder="请选择商品分类" />
                          </el-form-item>
                        </div>
                        <!--自定义页面-->
                        <div v-else-if="currentItem.hotspotareaList[index].linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                          <el-form-item label-width="0" :prop="'hotspotareaList['+index+'].linkAddress'" :rules="{required:true , message:'请选择自定义页面',trigger: ['blur','change','change']}" >
                            <el-select v-model="currentItem.hotspotareaList[index].linkAddress" style="width: 100%"  placeholder="请选择">
                              <el-option
                                v-for="item in pageList"
                                :key="item.id+''"
                                :label="item.pageName"
                                :value="item.id+''"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                        </div>

                        <!-- 搜索页-->
                        <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                        </div>

                        <i style="padding:1.5%" class="el-icon-link"></i>
                        <i @click="handleDeleteItemChild(index)" style="padding:1.5%" class="el-icon-delete"></i>
                      </div>
                    </div>
                  </el-form-item>

                  <el-button @click="handAddHotspotarea"  type="primary" plain icon="el-icon-plus">添加热区{{ currentItem.hotspotareaList?currentItem.hotspotareaList.length : 0}}/10</el-button>
                </div>
                <!-- 商品展示区-->
                <div v-if="currentItem.itemCode == 5" >
                  <el-form-item label="展示方式" >
                    <el-radio-group v-model="currentItem.itemGoods.displayMode">
                      <el-radio  :label="0" >一行一列</el-radio>
                      <el-radio  :label="1" >一行两列</el-radio>
                      <el-radio  :label="2" >列表显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="模块标题" prop="itemGoods.itemTitle"  >
                    <el-input v-model="currentItem.itemGoods.itemTitle" placeholder="请输入模块标题" />
                  </el-form-item>
                  <el-form-item label="Banner图" >
                    <div v-if="!currentItem.itemGoods.filePath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 40px;width: 40px;line-height: 40px;text-align: center;">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div v-else  style="width: 200px;position: relative">
                      <i class="el-icon-circle-close" style="font-size:17px;color:red;position: absolute;right: 5px;top:5px;z-index: 50" @click="deleteImage" ></i>
                      <el-image @click="handleSelector" v-model="currentItem.itemGoods.pictureId"  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.itemGoods.filePath"></el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="链接" >
                    <div style="position: relative" >
                      <el-select @change="currentItemChange" v-model="currentItem.itemGoods.linkType" style="width: 28%"  placeholder="请选择">
                        <el-option
                          v-for="item in linkTypeOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <!--商品-->
                      <div v-if="currentItem.itemGoods.linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-button type="text" size="mini" @click="handleSelectGoods(0)"> {{currentItem.itemGoods.linkGoodsName?currentItem.itemGoods.linkGoodsName:'选择商品'}}</el-button>
                      </div>

                      <div v-else-if="currentItem.itemGoods.linkType == 3" style="display: inline-block;vertical-align: top;width: 60%;padding-left: 2%">
                        <el-form-item label-width="0" prop="itemGoods.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <treeselect style="width: 100%;"
                                      v-model="currentItem.itemGoods.linkAddress"
                                      :options="goodsClassList"
                                      :normalizer="normalizer"
                                      :show-count="true"
                                      :clearable="false"
                                      placeholder="请选择商品分类" />
                        </el-form-item>
                      </div>
                      <!--自定义页面-->
                      <div v-else-if="currentItem.itemGoods.linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" prop="itemGoods.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <el-select v-model="currentItem.itemGoods.linkAddress" style="width: 100%"  placeholder="请选择">
                            <el-option
                              v-for="item in pageList"
                              :key="item.id+''"
                              :label="item.pageName"
                              :value="item.id+''"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <!-- 搜索页-->
                      <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                      </div>
                      <i style="padding:1.5%" class="el-icon-link"></i>
                    </div>
                  </el-form-item>
                  <el-form-item label="商品数量" prop="itemGoods.maxNumber" :rules="{required:true , message:'商品数量不能为空',trigger: 'blur'}" >
                    <el-input v-model="currentItem.itemGoods.maxNumber" placeholder="请输入商品数量" />
                  </el-form-item>
                  <el-form-item label="商品：" ></el-form-item>
                  <el-table
                    :data="currentItem.itemGoodsList"
                    stripe
                    :show-header="false"
                    style="width: 100%">
                    <el-table-column  prop="goodsCode"  label="商品编码" />
                    <el-table-column  prop="name" label="商品名称" />
                    <el-table-column prop="referencePrice" label="售价" />
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-top"
                          @click="handleMoveGoods(scope,0)"
                        ></el-button>
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-bottom"
                          @click="handleMoveGoods(scope,1)"
                        ></el-button>
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-delete"
                          @click="handleDeleteGoods(scope)"
                        ></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button @click="handleSelectGoodsList"  type="primary" plain icon="el-icon-plus">添加商品{{currentItem.itemGoodsList.length}}/{{ currentItem.itemGoods.maxNumber }}</el-button>
                </div>
                <!-- 视频播放-->
                <div v-if="currentItem.itemCode == 6" >
                  <el-form-item label="视频" prop="video.videoId"  :rules="{required:true , message:'视频不能为空',trigger: ['blur','change']}">
                    <div v-if="currentItem.video && !currentItem.video.videoPath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 40px;width: 40px;line-height: 40px;text-align: center">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div v-else @click="handleSelector"  style="width: 200px;">
                      <video   :autoplay="false" controls  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.video.videoPath"></video>
                    </div>
                  </el-form-item>

                  <el-form-item label="链接" >
                    <div style="position: relative" >
                      <el-select @change="currentItemChange" v-model="currentItem.video.linkType" style="width: 28%"  placeholder="请选择">
                        <el-option
                          v-for="item in linkTypeOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id"
                        ></el-option>
                      </el-select>

                      <!--商品-->
                      <div v-if="currentItem.video.linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-button type="text" size="mini" @click="handleSelectGoods(0)"> {{currentItem.video.linkGoodsName?currentItem.video.linkGoodsName:'选择商品'}}</el-button>
                      </div>

                      <div v-else-if="currentItem.video.linkType == 3" style="display: inline-block;vertical-align: top;width: 60%;padding-left: 2%">
                        <el-form-item label-width="0" prop="video.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <treeselect style="width: 100%;"
                                      v-model="currentItem.video.linkAddress"
                                      :options="goodsClassList"
                                      :normalizer="normalizer"
                                      :show-count="true"
                                      :clearable="false"
                                      placeholder="请选择商品分类" />
                        </el-form-item>
                      </div>

                      <!--自定义页面-->
                      <div v-else-if="currentItem.video.linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" prop="video.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <el-select v-model="currentItem.video.linkAddress" style="width: 100%"  placeholder="请选择">
                            <el-option
                              v-for="item in pageList"
                              :key="item.id+''"
                              :label="item.pageName"
                              :value="item.id+''"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <!-- 搜索页-->
                      <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                      </div>
                      <i style="padding:1.5%" class="el-icon-link"></i>
                    </div>
                  </el-form-item>
                </div>
                <!-- 拼团-->
                <div v-if="currentItem.itemCode == 7" >
                  <el-form-item label="模块标题" prop="groupbuy.itemTitle"  >
                    <el-input v-model="currentItem.groupbuy.itemTitle" placeholder="请输入模块标题" />
                  </el-form-item>
                  <el-form-item label="Banner图" >
                    <div v-if="!currentItem.groupbuy.filePath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 40px;width: 40px;line-height: 40px;text-align: center">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div v-else  style="width: 200px;position: relative">
                      <i class="el-icon-circle-close" style="font-size:17px;color:red;position: absolute;right: 5px;top:5px;z-index: 50" @click="deleteImage" ></i>
                      <el-image  @click="handleSelector" v-model="currentItem.groupbuy.pictureId"  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.groupbuy.filePath"></el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="展示方式" >
                    <el-radio-group v-model="currentItem.groupbuy.displayMode">
                      <el-radio  :label="0" >一行一列</el-radio>
                      <el-radio  :label="1" >一行两列</el-radio>
                      <el-radio  :label="2" >列表显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="拼团活动" prop="groupbuy.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                    <el-select  v-model="currentItem.groupbuy.linkAddress" style="width: 100%"  placeholder="请选择">
                      <el-option
                        v-for="item in groupbuyList"
                        :key="item.id+''"
                        :label="item.groupName"
                        :value="item.id+''"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <!-- 限时抢购-->
                <div v-if="currentItem.itemCode == 8" >
                  <el-form-item label="模块标题" prop="panicbuy.itemTitle"  >
                    <el-input v-model="currentItem.panicbuy.itemTitle" placeholder="请输入模块标题" />
                  </el-form-item>
                  <el-form-item label="Banner图" >
                    <div v-if="!currentItem.panicbuy.filePath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 40px;width: 40px;line-height: 40px;text-align: center">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div v-else   style="width: 200px;position: relative">
                      <i class="el-icon-circle-close" style="font-size:17px;color:red;position: absolute;right: 5px;top:5px;z-index: 50" @click="deleteImage" ></i>
                      <el-image @click="handleSelector" v-model="currentItem.panicbuy.pictureId"  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.panicbuy.filePath"></el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="展示方式" >
                    <el-radio-group v-model="currentItem.panicbuy.displayMode">
                      <el-radio  :label="0" >一行一列</el-radio>
                      <el-radio  :label="1" >一行两列</el-radio>
                      <el-radio  :label="2" >列表显示</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="限时抢购" prop="panicbuy.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                    <el-select v-model="currentItem.panicbuy.linkAddress" style="width: 100%"  placeholder="请选择">
                      <el-option
                        v-for="item in panicbuyList"
                        :key="item.id+''"
                        :label="item.panicName"
                        :value="item.id+''"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                </div>
                <!-- 单图展示-->
                <div v-if="currentItem.itemCode == 9" >
                  <el-form-item label="展示图片" prop="picture.pictureId"  :rules="{required:true , message:'图片不能为空',trigger: ['blur','change']}">
                    <div v-if="!currentItem.picture.filePath" @click="handleSelector" style="border: 1px dashed #DCDFE6;border-radius: 10px;height: 40px;width: 40px;line-height: 40px;text-align: center">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div v-else @click="handleSelector"  style="width: 200px;">
                      <el-image  v-model="currentItem.picture.pictureId"  style="width: 100%;height: 100%;" :src="baseUrl+currentItem.picture.filePath"></el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="链接" >
                    <div style="position: relative" >
                      <el-select @change="currentItemChange" v-model="currentItem.picture.linkType" style="width: 28%"  placeholder="请选择">
                        <el-option
                          v-for="item in linkTypeOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id"
                        ></el-option>
                      </el-select>

                      <!--商品-->
                      <div v-if="currentItem.picture.linkType == 2" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-button type="text" size="mini" @click="handleSelectGoods(0)"> {{currentItem.picture.linkGoodsName?currentItem.picture.linkGoodsName:'选择商品'}}</el-button>
                      </div>

                      <div v-else-if="currentItem.picture.linkType == 3" style="display: inline-block;vertical-align: top;width: 60%;padding-left: 2%">
                        <el-form-item label-width="0" prop="picture.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <treeselect style="width: 100%;"
                                      v-model="currentItem.picture.linkAddress"
                                      :options="goodsClassList"
                                      :normalizer="normalizer"
                                      :show-count="true"
                                      :clearable="false"
                                      placeholder="请选择商品分类" />
                        </el-form-item>
                      </div>
                      <!--自定义页面-->
                      <div v-else-if="currentItem.picture.linkType == 5" style="display: inline-block;vertical-align: top;width: 50%;padding-left: 2%">
                        <el-form-item label-width="0" prop="picture.linkAddress" :rules="{required:true , message:'',trigger: ['blur','change']}" >
                          <el-select v-model="currentItem.picture.linkAddress" style="width: 100%"  placeholder="请选择">
                            <el-option
                              v-for="item in pageList"
                              :key="item.id+''"
                              :label="item.pageName"
                              :value="item.id+''"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <!-- 搜索页-->
                      <div v-else style="display: inline-block;width: 50%;padding-left: 2%">
                      </div>
                      <i style="padding:1.5%" class="el-icon-link"></i>
                    </div>
                  </el-form-item>
                </div>

              </el-form>

              <div slot="footer" class="dialog-footer" style="text-align: right" >
                <el-button type="primary" @click="handleUpdateItem">确 定</el-button>
                <el-button @click="handleCancelUpdateItem" >取 消</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 图片选择器 -->
    <picture-selector
      ref="selector"
      :open="selector"
      :multiple="multiple"
      @input="getCheckedPicture"
      @close="closeSelector"
    ></picture-selector>

    <!-- 商品选择器 -->
    <goods-selector
      ref="goodsSelector"
      :open="goodsSelector"
      :multiple="1"
      @input="getCheckedGoods"
      @close="closeSelector"
    ></goods-selector>

    <goods-selector
      ref="goodsSelector"
      :open="goodsListSelector"
      :multiple="goodsMultiple"
      @input="getCheckedGoodsList"
      @close="closeSelector"
    ></goods-selector>


  </div>
</template>

<script>
import Draggable from "@/components/Draggable/index";
import {addItem, delItem, listItem, moveDown, moveUp, updateItem} from "@/api/page/item";
import PictureSelector from "@/views/picture/file/selector";
import GoodsSelector from "@/views/goods/goods/goodsSelector";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listGoodsClass} from "@/api/goods/goodsClass";
import resize from "@/utils/resize";
import {pageList} from "@/api/page/page";
import {groupbuyList} from "@/api/market/groupbuying";
import {panicbuyList} from "@/api/market/panicbuying";


export default {
  name: "pageEdit",
  directives: {
    resize
  },
  components: {
    Draggable,
    PictureSelector,
    GoodsSelector,
    Treeselect
  },
  data(){
    return{
      page:null,
      loading:false,
      draggable:false,
      index:0,
      itemOptions:[
        {
          code:1,
          label:"轮播海报",
          tagIcon:"row",
          num:0,
          size:3
        },
        {
          code:2,
          label:"弹出图层",
          tagIcon:"link",
          num:0,
          size:1
        },
        {
          code:3,
          label:"公告提示",
          tagIcon:"message",
          num:0,
          size:3
        },
        {
          code:4,
          label:"多热区切图",
          tagIcon:"swagger",
          num:0,
          size:5
        },
        {
          code:5,
          label:"商品展示",
          tagIcon:"eye-open",
          num:0,
          size:5
        },
        {
          code:6,
          label:"视频播放",
          tagIcon:"monitor",
          num:0,
          size:3
        },
        {
          code:7,
          label:"拼团",
          tagIcon:"peoples",
          num:0,
          size:1
        },
        {
          code:8,
          label:"限时抢购",
          tagIcon:"time",
          num:0,
          size:1,
        },
        {
          code:9,
          label:"单图展示",
          tagIcon:"component",
          num:0,
          size:6
        }
      ],
      linkTypeOptions:[
        {
          id:0,
          label:"无"
        },
        {
          id:1,
          label:"首页"
        },
        {
          id:2,
          label:"商品"
        },
        {
          id:3,
          label:"商品分类"
        },
        {
          id:4,
          label:"优惠券"
        },
        {
          id:5,
          label:"自定义页面"
        },
        {
          id:6,
          label:"搜索页"
        }
      ],
      //图片选择器
      selector:false,
      goodsSelector:false,
      goodsListSelector:false,
      //弹出图层
      ejectShow:false,
      ejectPath:false,
      //组件集合
      pageItemList:[],
      //当前属性区激活的组件
      currentItem:{},
      //选中的图片
      checkedFileList:[],
      baseUrl: process.env.VUE_APP_BASE_API,
      //可选图片张数
      multiple:0,
      goodsMultiple:0,
      //轮播图宽度用来计算跑马灯高度
      bannerWidth:400,
      hotspotareaWidth:520,
      hotspotareaHeight:200,
      // 商品分类数据
      goodsClassList: [],
      //自定义页面数据
      pageList:[],
      groupbuyList:[],
      panicbuyList:[]
    }
  },
  created() {
   this.page=this.$route.query;
   this.getPageItemList();
   this.getGoodsClassList();
   this.getPageList();
   this.getGroupBuyList();
   this.getPanicBuyList();
  },
  mounted() {
    this.imgLoad();
  },
  methods:{
    loaded(){
      this.draggable=true;
    },
    resetTableHeight(){
      if(this.$refs.hotspotareaWidth){
        this.hotspotareaHeight = this.$refs.hotspotareaWidth.offsetHeight;
        this.hotspotareaWidth = this.$refs.hotspotareaWidth.offsetWidth;
      }
      if(this.$refs.bannerWidth){
        this.bannerWidth=this.$refs.bannerWidth[0].width;
      }
    },
    imgLoad(){
      this.$nextTick(()=>{
        if(this.$refs.bannerWidth){
          this.bannerWidth=this.$refs.bannerWidth[0].width;
        }
      })
    },
      //通过模块编号查找模块
    getItemByCode(code){
      return this.itemOptions.find(item => item.code ===  code)
    },
    //设置选中模块
    setCurrentItem(item){
      if(item.itemCode != 4){
        this.draggable=false;
      }
      if(item.itemCode ==2){
        if(!item.eject){
          let eject={
            id: null,
            itemId: item.id,
            pictureId: null,
            displayTime: 3,
            displayMode: 1,
            linkType: 0,
            linkAddress: null
          }
          item.eject=eject
        }
      }else if(item.itemCode ==3){
        if(!item.notice){
          let notice={
            id: null,
            itemId: item.id,
            pictureId:undefined,
            content:undefined,
            scrollMode:0,
            linkType:0,
            linkAddress:null,
            textColor:'#000000',
            backgroundColor:'#ffffff'
          }
          item.notice=notice
        }
      }else if(item.itemCode ==5){
        if(!item.itemGoods){
          let itemGoods={
            id: null,
            itemId: item.id,
            itemTitle: '',
            pictureId: null,
            filePath:'',
            linkAddress: null,
            displayMode: 1,
            maxNumber: 10,
            linkType: 0,
            backgroundColor: null
          }
          item.itemGoods=itemGoods
        }
      }else if(item.itemCode ==6){
        if(!item.video){
          let video={
            id: null,
            itemId: item.id,
            videoId: null,
            videoPath: null,
            linkType: 0,
            linkAddress: null
          }
          item.video = video
        }
      }else if(item.itemCode ==7){
        if(!item.groupbuy){
          let groupbuy={
            id: null,
            itemId: item.id,
            displayMode: 1,
            pictureId: null,
            filePath: null,
            linkAddress: null,
            activityId: null
          }
          item.groupbuy = groupbuy
        }
      }else if(item.itemCode ==8){
        if(!item.panicbuy){
          let panicbuy={
            id: null,
            itemId: item.id,
            displayMode: 1,
            pictureId: null,
            filePath: null,
            linkAddress: null,
            activityId: null
          }
          item.panicbuy = panicbuy
        }
      }else if(item.itemCode ==9){
        if(!item.picture){
          let picture={
            id: null,
            itemId: item.id,
            pictureId: null,
            filePath: null,
            linkType: 0,
            linkAddress: null
          }
          item.picture = picture
        }
      }
      this.currentItem=item;
     },
    //模块使用数量重置
    itemOptionsReset(){
      this.itemOptions.forEach(item=>{
        item.num = 0;
      })
    },
    //获取页面设置模块集合
    getPageItemList(){
      this.loading=true
      let queryParam = {
        pageId:this.page.id
      }
      listItem(queryParam).then(response => {
        this.pageItemList = response.data;
        let that=this;
        this.itemOptionsReset();
        this.pageItemList.forEach(item=>{
          that.itemOptions.find(item1 => item1.code ===  item.itemCode).num++;
        })
        this.loading = false;
      })
    },
    //添加页面模块
    handleAddItem(item){
      if(item.num >= item.size){
        this.msgError("该模块类型添加已到上限！")
        return
      }
      let itemForm= {
        pageId:this.page.id,
        itemCode:item.code,
        sort:this.pageItemList.length+1
      }
      addItem(itemForm).then(response => {
        this.currentItem=item;
        this.getPageItemList();
      })
    },
    //调整顺序 上移
    handleMoveUp(item){
      moveUp(item).then(response => {
        this.getPageItemList();
      })
    },
    //调整顺序 上移
    handleMoveDown(item){
      moveDown(item).then(response => {
        this.getPageItemList();
      })
    },
    //删除页面模块
    handleDeleteItem(item){
      delItem(item).then(response => {
        this.getPageItemList();
        this.currentItem={}
      })
    },
    /** 打开图片选择器 */
    handleSelector(){
      if(this.currentItem.itemCode == 1) {//如果是轮播海报
        this.multiple = 4;
        if(this.currentItem.scrollposterList.length >= 4){
          return
        }else {
          this.multiple = 4 - this.currentItem.scrollposterList.length;
        }
      }else if(this.currentItem.itemCode == 2){//公告提示
        this.multiple = 1;
      }else if(this.currentItem.itemCode == 3){//公告提示
        this.multiple = 1;
      }else if(this.currentItem.itemCode == 4){//热区切图
        this.multiple = 1;
      }else if(this.currentItem.itemCode == 5){//商品展示区
        this.multiple = 1
      }else if(this.currentItem.itemCode == 6){//视频展示区
        this.multiple = 1
      }else if(this.currentItem.itemCode == 7){//拼团
        this.multiple = 1
      }else if(this.currentItem.itemCode == 8){//限时抢购
        this.multiple = 1
      }else if(this.currentItem.itemCode == 9){//单图模式
        this.multiple = 1
      }
      this.selector=true;
    },
    //关闭选择器
    closeSelector(){
      this.selector=false;
      this.goodsSelector=false;
      this.goodsListSelector = false;
    },
    //选择器确定选择
    getCheckedPicture(checkedFileList){
      this.checkedFileList=checkedFileList;
      if(this.currentItem.itemCode == 1){//如果是轮播海报
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          let scrollposter={
            id: null,
            itemId: that.currentItem.id,
            pictureId: item.id,
            filePath:item.filePath,
            previewPath: item.previewPath,
            width:item.width,
            height:item.height,
            linkType: 0,
            linkAddress: null,
            sort: index+1
          };
          if(!that.currentItem.scrollposterList){
            that.currentItem.scrollposterList=[];
          }
          that.currentItem.scrollposterList.push(scrollposter)
        })
      }else if(this.currentItem.itemCode == 2){//如果是弹出图层
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.eject.pictureId = item.id;
          that.currentItem.eject.filePath = item.filePath;
        })
      } else if(this.currentItem.itemCode == 3){//如果是公告提示
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.notice.pictureId = item.id;
          that.currentItem.notice.filePath = item.filePath;
        })
      } else if(this.currentItem.itemCode == 4){//如果是热区切图
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.itemPicture = item.id;
          that.currentItem.filePath = item.filePath;
        })
      }else if(this.currentItem.itemCode == 5){//商品展示区
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.itemGoods.pictureId = item.id;
          that.currentItem.itemGoods.filePath = item.filePath;
        })
      }else if(this.currentItem.itemCode == 6){//视频展示区
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.video.videoId = item.id;
          that.currentItem.video.videoPath = item.filePath;
        })
      }else if(this.currentItem.itemCode == 7){//拼团
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.groupbuy.pictureId = item.id;
          that.currentItem.groupbuy.filePath = item.filePath;
        })
      }else if(this.currentItem.itemCode == 8){//限时抢购
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.panicbuy.pictureId = item.id;
          that.currentItem.panicbuy.filePath = item.filePath;
        })
      }else if(this.currentItem.itemCode == 9){//单图模式
        let that = this;
        this.checkedFileList.forEach((item,index)=>{
          that.currentItem.picture.pictureId = item.id;
          that.currentItem.picture.filePath = item.filePath;
        })
      }
      this.selector=false;
    },

    handleUpdateItem(){
      this.$refs["itemForm"].validate(valid => {
        if (valid) {
          updateItem(this.currentItem).then(response => {
            this.msgSuccess("操作成功");
            this.getPageItemList();
          });
        }
      })
    },
    handleCancelUpdateItem(){
      this.currentItem = {};
      this.getPageItemList();
    },
    //删除子元素
    handleDeleteItemChild(index){
      if(this.currentItem.itemCode == 1){
        this.currentItem.scrollposterList.splice(index, 1)
      }else if(this.currentItem.itemCode == 4){
        this.currentItem.hotspotareaList.splice(index, 1)
      }
    },
    handleItemMove(type,index){//type 0 上移  1下移
      if(type == 0){
          if(index == 0){
            return
          }
          if(this.currentItem.itemCode == 1){
            this.currentItem.scrollposterList.splice(index-1,1,...this.currentItem.scrollposterList.splice(index,1,this.currentItem.scrollposterList[index-1] ))
          }else if(this.currentItem.itemCode == 4){
            this.currentItem.hotspotareaList.splice(index-1,1,...this.currentItem.hotspotareaList.splice(index,1,this.currentItem.hotspotareaList[index-1] ))
          }
      }else if(type == 1){
        if(this.currentItem.itemCode == 1){
          if(index == this.currentItem.scrollposterList.length-1){
            return;
          }
          this.currentItem.scrollposterList.splice(index,1,...this.currentItem.scrollposterList.splice(index+1,1,this.currentItem.scrollposterList[index] ))
        }else if(this.currentItem.itemCode == 4){
          if(index == this.currentItem.hotspotareaList.length-1){
            return;
          }
          this.currentItem.hotspotareaList.splice(index,1,...this.currentItem.hotspotareaList.splice(index+1,1,this.currentItem.hotspotareaList[index] ))
        }
      }
    },
    /** 查询商品分类列表 */
    getGoodsClassList() {
      listGoodsClass().then(response => {
        this.goodsClassList = this.handleTree(response.data, "id");
      });
    },
    //treeSelect自定义键名
    normalizer(node) {
      return {
        id: node.id,
        label: node.className,
        children: node.children,
      }
    },
    getPageList(){
      pageList({state:'0',isHome:'1'}).then(response =>{
        this.pageList = response.data
      })
    },
    //重新校验
    linkAddressChange(index){
      this.$nextTick(() => {
         this.$refs.itemForm.validateField('scrollposterList['+index+'].linkAddress');
         this.$refs.itemForm.validateField('hotspotareaList['+index+'].linkAddress');
      })
    },
    handAddHotspotarea(){
      if(!this.currentItem.hotspotareaList){
        this.currentItem.hotspotareaList=[]
      }
      if(this.currentItem.hotspotareaList.length >= 10){
        return
      }else {
        let hotspotarea={
          itemId: this.currentItem.id,
          pointx: 0,
          pointy: 0,
          width: 50/this.hotspotareaWidth,
          height: 50/this.hotspotareaHeight,
          linkType: 0,
          linkAddress: null,
          sort: 0
        }
        this.currentItem.hotspotareaList.push(hotspotarea);
      }
    },//获取热区调整后的位置
    resize(index,left,top,width,height){
      this.currentItem.hotspotareaList[index].pointx =left/this.hotspotareaWidth;
      this.currentItem.hotspotareaList[index].pointy =top/this.hotspotareaHeight;
      this.currentItem.hotspotareaList[index].width =width/this.hotspotareaWidth;
      this.currentItem.hotspotareaList[index].height =height/this.hotspotareaHeight;
    },
    drag(index,left,top){
      this.currentItem.hotspotareaList[index].pointx =left/this.hotspotareaWidth;
      this.currentItem.hotspotareaList[index].pointy =top/this.hotspotareaHeight;
    },
    //选择商品
    handleSelectGoods(index){
      this.index = index;
      this.goodsSelector = true;
    },
    //选择器确定选择
    getCheckedGoods(checkedGoodsList){
      if (checkedGoodsList.length <= 0) {
        return
      }
      //如果是轮播海报
      if(this.currentItem.itemCode == 1){
        this.currentItem.scrollposterList[this.index].linkAddress = checkedGoodsList[0].id;
        this.currentItem.scrollposterList[this.index].linkGoodsName = checkedGoodsList[0].name;
      }else if(this.currentItem.itemCode == 2){//弹出图层
        this.currentItem.eject.linkAddress = checkedGoodsList[0].id;
        this.currentItem.eject.linkGoodsName = checkedGoodsList[0].name;
      }else if(this.currentItem.itemCode == 3){//通知公告
        this.currentItem.notice.linkAddress = checkedGoodsList[0].id;
        this.currentItem.notice.linkGoodsName = checkedGoodsList[0].name;
      }else if(this.currentItem.itemCode == 4){
        this.currentItem.hotspotareaList[this.index].linkAddress = checkedGoodsList[0].id;
        this.currentItem.hotspotareaList[this.index].linkGoodsName = checkedGoodsList[0].name;
      }else if(this.currentItem.itemCode == 5){//商品列表
        this.currentItem.itemGoods.linkAddress = checkedGoodsList[0].id;
        this.currentItem.itemGoods.linkGoodsName = checkedGoodsList[0].name;
      }else if(this.currentItem.itemCode == 6){//视频模块
        this.currentItem.video.linkAddress = checkedGoodsList[0].id;
        this.currentItem.video.linkGoodsName = checkedGoodsList[0].name;
      }else if(this.currentItem.itemCode == 9){//单图展示
        this.currentItem.picture.linkAddress = checkedGoodsList[0].id;
        this.currentItem.picture.linkGoodsName = checkedGoodsList[0].name;
      }
    },
    //选择商品-多选
    handleSelectGoodsList(){
      this.goodsListSelector = true;
      this.goodsMultiple = this.currentItem.itemGoods.maxNumber-this.currentItem.itemGoodsList.length;
    },
    //选择器确定选择
    getCheckedGoodsList(checkedGoodsList){
      if (checkedGoodsList.length <= 0) {
        return
      }
      if(!this.currentItem.itemGoodsList){
        this.currentItem.itemGoodsList = [];
      }
      checkedGoodsList.forEach(item=>{
        this.currentItem.itemGoodsList.push(item)
      })


    },//小项切换选择后清空值
    currentItemChange(index){
      //如果是轮播海报
      if(this.currentItem.itemCode == 1){
        this.currentItem.scrollposterList[index].linkAddress = null
        this.currentItem.scrollposterList[index].linkGoodsName = null
      }else if(this.currentItem.itemCode == 2){//通知公告
        this.currentItem.eject.linkAddress = null;
        this.currentItem.eject.linkGoodsName = null;
      }else if(this.currentItem.itemCode == 3){//通知公告
        this.currentItem.notice.linkAddress = null;
        this.currentItem.notice.linkGoodsName = null;
      }else if(this.currentItem.itemCode == 4){
        this.currentItem.hotspotareaList[index].linkAddress = null;
        this.currentItem.hotspotareaList[index].linkGoodsName = null;
      }else if(this.currentItem.itemCode == 5){//商品列表
        this.currentItem.itemGoods.linkAddress = null;
        this.currentItem.itemGoods.linkGoodsName = null;
      }else if(this.currentItem.itemCode == 6){//商品列表
        this.currentItem.video.linkAddress = null;
        this.currentItem.video.linkGoodsName = null;
      }
    },//显示弹出图层
    showEject(item){
      this.ejectShow = true;
      if(item.eject){
        this.ejectPath = item.eject.filePath;
      }

    },
    closeEjectShow(){
      this.ejectShow = false;
      this.ejectPath = '';
    },
    handleDeleteGoods(scope){
      this.currentItem.itemGoodsList.splice(scope.$index,1)
    },
    //index1 目标位置 index2 原位置
    handleMoveGoods(scope,type) {
      if(type == 0 ){//上移
        if(scope.$index == 0){
          return
        }
        this.currentItem.itemGoodsList.splice(scope.$index, 1, ...this.currentItem.itemGoodsList.splice(scope.$index - 1, 1, this.currentItem.itemGoodsList[scope.$index]));
      }else if(type == 1){ //下移
        if(scope.$index == (this.currentItem.itemGoodsList.length -1)){
          return
        }
        this.currentItem.itemGoodsList.splice(scope.$index, 1, ...this.currentItem.itemGoodsList.splice(scope.$index + 1, 1, this.currentItem.itemGoodsList[scope.$index]));
      }
    },//拼团列表
    getGroupBuyList(){
      groupbuyList({status : '0'}).then(res =>{
        this.groupbuyList = res.data
      })
    },
    //限时活动列表
    getPanicBuyList(){
      panicbuyList({status : '0'}).then(res =>{
        this.panicbuyList = res.data
      })
    },
    deleteImage(){
      if(this.currentItem.itemCode == 5){
        this.currentItem.itemGoods.pictureId =null;
        this.currentItem.itemGoods.filePath = '';
      }else if(this.currentItem.itemCode == 7){
        this.currentItem.groupbuy.pictureId =null;
        this.currentItem.groupbuy.filePath = '';
      }else if(this.currentItem.itemCode == 8){
        this.currentItem.panicbuy.pictureId =null;
        this.currentItem.panicbuy.filePath = '';
      }


    }
  },

}
</script>

<style lang="scss" scoped>
  .tool_button{
    width: 80%;
    height: 50px;
    margin:10px 10% !important
  }
  .myButton{
    padding: 5px;
    margin: 0;
  }
  .components-title{
    font-size: 14px;
    color: #222;
    margin: 6px 2px;
    .svg-icon{
      color: #666;
      font-size: 18px;
    }
  }
  .components-item {
    display: inline-block;
    width: 96%;
    margin: 2%;
    transition: transform 0ms !important;
  }
  .components-body {
    padding: 8px 10px;
    background: #409EFF;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    color: white;
    .svg-icon{
      color: white;
      font-size: 15px;
    }
    &:hover {
      border: 1px dashed #787be8;
      color: #787be8;
      .svg-icon {
        color: #787be8;
      }
    }
  }
  .item-selected{
    border: 1px solid #787be8!important;
  }
  .myPicker .el-color-picker__trigger{
    width: 30%!important;
  }

</style>
